<template>
  <div class="detail-wrap">
    <Head title="基本信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="100"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="发放模式">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm2"
          :detail="data.detailData"
          :labelWidth="100"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="发放记录">
      <template #content>
        <Table
          ref="tableRef"
          :url="URL_PAGINGTASKRECORD"
          :columns="data.columns"
          :toolbar="data.toolbar"
          :query="data.query"
          :params="{ taskId: id }"
        ></Table>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import {
  getTaskById,
  URL_PAGINGTASKRECORD,
  EXPORT_TASKRECORD,
} from '@/service/apis/market';
import {
  TARGET_TYPE,
  EXECUTE_TYPE,
  EXECUTE_PERIOD,
  WEEK,
} from '@/utils/dictionaries';
import { exportFile } from '@/utils/utils';

const tableRef = ref();

const route = useRoute();
const {
  query: { id },
} = route;

const detailForm1: any = reactive([
  {
    label: '任务名称',
    prop: 'name',
  },
  {
    label: '发放目标',
    prop: 'targetType',
    dic: TARGET_TYPE,
    comName: 'radio',
    type: Number,
  },
]);

const detailForm2: any = reactive([
  {
    label: '选择模式',
    prop: 'executeType',
    dic: EXECUTE_TYPE,
  },
]);

const data = reactive({
  detailData: {} as any,
  columns: [
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'userNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'mobile',
      label: '手机号',
    },
    {
      prop: 'couponName',
      label: '优惠券名称',
    },
    {
      prop: 'couponNumber',
      label: '优惠券编号',
    },
    {
      prop: 'createTime',
      label: '发放时间',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'couponRecordList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        console.log('导出---', row);
        // exportAccountFlow
        exportFile(
          EXPORT_TASKRECORD,
          '优惠券发放记录',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '用户账号',
      prop: 'userNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '发放时间',
      prop: 'time',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '优惠券名称',
      prop: 'couponName',
      comName: 'input',
      props: {
        placeholder: '请输入优惠券名称',
      },
    },
    {
      label: '优惠券编号',
      prop: 'couponNumber',
      comName: 'input',
      props: {
        placeholder: '请输入优惠券编号',
      },
    },
  ],
});

getTaskById(id).then((res: any) => {
  console.log('res---', res);
  data.detailData = res;

  data.detailData.executePeriod = String(res.executePeriod);

  res.couponDetails.forEach((item: any, index: number) => {
    detailForm1.splice(1 + index, 0, {
      label: `优惠券${index + 1}`,
      prop: 'couponName',
      template: (row: any, index: number) => {
        return `${item.couponName} ${item.couponCount}张`;
      },
    });
  });
  if (res.targetType !== 2) {
    detailForm1.push({
      label: '',
      prop: 'targetTree',
      comName: 'tree',
      dic: res.targetTree,
    });
  } else {
    detailForm1.push({
      label: '',
      prop: 'targetIds',
      comName: 'textarea',
    });
  }

  if (res.executeType === 0) {
    detailForm2.push({
      label: '发放时间',
      prop: 'updateTime',
    });
  } else if (res.executeType === 1) {
    detailForm2.push({
      label: '发放时间',
      prop: 'nextTime',
    });
  } else if (res.executeType === 2) {
    detailForm2.push({
      label: '总发放次数',
      prop: 'totalCount',
      dataType: String,
    });
    detailForm2.push({
      label: '发放时间',
      prop: 'executedCount',
      template: (row: any, index: number) => {
        if (row.executePeriod === '0') {
          return `${EXECUTE_PERIOD[0].label}/${row.executeTime}`;
        } else if (row.executePeriod == '1') {
          const executeWeek = WEEK.find((item: any) => {
            if (item.value == row.executeWeek) {
              console.log(item.label);
              return item;
            }
          });
          return `${EXECUTE_PERIOD[1].label}/${executeWeek?.label}/ ${row.executeTime}`;
        } else if (row.executePeriod == '2') {
          return `${EXECUTE_PERIOD[2].label}/${row.executeDate}日/ ${row.executeTime}`;
        }
        return '--';
      },
    });
  }
});
</script>